<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            overflow: hidden;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .container {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        #student-list {
            width: 300px;
            height: 100px;
            margin-bottom: 20px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #result {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #45a049;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .spinning {
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>随机点名</h1>
    <textarea id="student-list" placeholder="请输入学生名单，每行一个名字"></textarea>
    <br>
    <button onclick="pickStudent()">开始点名</button>
    <div id="result"></div>
</div>

<script>
    function pickStudent() {
        var button = document.querySelector('button');
        var resultDiv = document.getElementById('result');
        var studentList = document.getElementById('student-list').value;
        var students = studentList.split('\n').filter(function(student) {
            return student.trim() !== '';
        });

        if (students.length === 0) {
            alert('请输入至少一个学生名字！');
            return;
        }

        // 添加旋转动画
        button.classList.add('spinning');
        resultDiv.style.opacity = 0;

        // 模拟随机选择过程
        var interval = setInterval(function() {
            var randomIndex = Math.floor(Math.random() * students.length);
            resultDiv.innerText = '正在点名：' + students[randomIndex];
        }, 100);

        // 停止动画并显示最终结果
        setTimeout(function() {
            clearInterval(interval);
            var finalIndex = Math.floor(Math.random() * students.length);
            resultDiv.innerText = '被点中的是：' + students[finalIndex];
            resultDiv.style.opacity = 1;
            button.classList.remove('spinning');
        }, 2000); // 2秒后停止
    }
</script>

</body>
</html>